<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料</title>
    <link href="../../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../static/vendor/bootstrap-icons/bootstrap-icons.min.css" rel="stylesheet">
    <link href="../../static/css/vui365.min.css" rel="stylesheet">
</head>

<body>
    <div id="app">
        <!-- Content Header (Page header) -->
        <h5 class="ms-3 my-3">个人资料</h5>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <!-- Profile Image -->
                    <div class="card card-primary card-outline">
                        <div class="card-body box-profile">
                            <div class="text-center">
                                <img class="profile-user-img img-fluid img-circle" src="{{dataOfMain.data.avatar}}"
                                    alt="User profile picture">
                            </div>
                            <h3 class="profile-username text-center">{{dataOfMain.data.user_name}}</h3>
                            <ul class="list-group list-group-unbordered mb-3">
                                <li class="list-group-item">
                                    <span>登录次数</span> <a class="float-right">{{dataOfMain.data.login_count}}</a>
                                </li>
                                <li class="list-group-item">
                                    <span>登录时间</span> <a class="float-right">{{dataOfMain.data.login_time}}</a>
                                </li>
                                <li class="list-group-item">
                                    <span>登录 IP</span> <a class="float-right">{{dataOfMain.data.login_ip}}</a>
                                </li>
                            </ul>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
                <div class="col-md-9">
                    <div class="card">
                        <div class="card-header p-2">
                            <ul class="nav nav-pills">
                                <li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab">设置</a></li>
                            </ul>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="tab-content">
                                <div class="active tab-pane" id="activity">
                                    <!-- form start -->
                                    <form class="main-form form-horizontal" role="form" method="POST"
                                        action="/index.php/api/admin/esxdm_auth_admin/update"
                                        data-source-url="/index.php/api/admin/esxdm_auth_admin/read">
                                        <div class="row skeleton" v-for="(col, idx) of getColumns(true)" :key="idx">
                                            <label class="col-sm-2 col-form-label">{{ col.text }}</label>
                                            <div class="col-sm-9">
                                                <div class="col-sm-9" v-if="col.component == 'email'">
                                                    <div class="input-group input-group-sm">
                                                        <span class="input-group-text">EMAIL</span>
                                                        <input class="form-control form-control-sm" :name="col.name"
                                                            type="text" placeholder="电子邮箱" />
                                                    </div>
                                                </div>
                                                <div class="col-sm-9" v-else-if="col.component == 'radio'">
                                                    <radio-input :name="col.name" :value="dataOfMain.data[col.name]"
                                                        :data-source="dataOfMain[col.name + '_data']"></radio-input>
                                                </div>
                                                <div class="col-sm-9" v-else-if="col.component == 'select'">
                                                    <select-input :name="col.name" :value="dataOfMain.data[col.name]"
                                                        :data-source="dataOfMain[col.name + '_data']"
                                                        value-field="value" text-field="text"></select-input>
                                                </div>
                                                <div class="col-sm-9" v-else-if="col.component == 'imguploader'">
                                                    <upload-input :name="col.name" :value="dataOfMain.data[col.name]"
                                                        param="{imgwidth:150,imgheight:150}" data-file-accept="image/*"
                                                        data-file-multiplex="true"></upload-input>
                                                </div>
                                                <div class="col-sm-9" v-else>
                                                    <input class="form-control form-control-sm" :name="col.name"
                                                        :value="dataOfMain.data[col.name]" :type="col.component"
                                                        :placeholder="col.text" required />
                                                </div>
                                            </div>
                                        </div>
                                        <!-- /.form-body -->
                                        <div class="form-footer">
                                            <cd-button ref="btnCd" class="btn btn-primary" @click="onSubmitHandle()">保存</cd-button>
                                        </div>
                                        <!-- /.form-footer -->
                                    </form>
                                </div>
                                <!-- /.tab-pane -->
                            </div>
                            <!-- /.tab-content -->
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.nav-tabs-custom -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <script src="../../static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../../static/vendor/vue/vue.global.prod.min.js"></script>
    <script src="../../static/vendor/chart.js/chart.min.js"></script>
    <script>
        // 全局配置
        this.vui365 = this.parent.vui365;

        // Api接口配置
        const UrlCfg = {
            profile: '/api/admin/profile/{id}',
        }
        // 应用配置
        const App = {
            data() {
                return {
                    id: 0,
                    dataOfMain: {
                        data: {}, status_data: []
                    },
                };
            },
            methods: {
                // 初始化页面数据
                async initData() {
                    const msgInfo = await vui365.stdAxios(UrlCfg.profile.replace('{id}', this.id), {});
                    console.log("msgInfo=", msgInfo);
                    if (msgInfo.status == 0) {
                        vui365.BsDialog.alert(msgInfo.message);
                        return;
                    }
                    this.dataOfMain = msgInfo.data;
                },
                /**
                 * 初始化页面视图
                 */
                initView() {
                    // 移除骨架屏
                    document.querySelectorAll('.skeleton').forEach(el => {
                        el.classList.remove("skeleton");
                    })
                },
                // 加载表单数据
                async loadFormData() {
                    const msgInfo = await vui365.stdAxios(UrlCfg.show.replace('{id}', this.id), {}, 'GET');
                    // console.log("[加载表单数据] msgInfo=", this.id, msgInfo);
                    if (msgInfo.status == 0) {
                        alert(msgInfo.message);
                        return;
                    }
                    this.dataOfMain = msgInfo.data;
                },
                // 处理表单提交事件
                async onSubmitHandle() {
                    let elForm = document.querySelector("form");
                    // 表单原生校验方法
                    if (!elForm.checkValidity()) {
                        elForm.reportValidity();
                        return;
                    }
                    let formData = new FormData(elForm);
                    if (formData.length == 0) {
                        vui365.BsDialog.alert('表单无效');
                        return;
                    }
                    // 按钮倒计时
                    if (!this.$refs.btnCd.isEnable()) {
                        return;
                    }
                    let data = {}
                    formData.forEach((v, k) => {
                        data[k] = v;
                    });
                    formData = null;
                    let msgInfo = {}
                    if (this.id > 0) {
                        msgInfo = await vui365.stdAxios(UrlCfg.update.replace('{id}', this.id), data, 'PUT');
                    } else {
                        msgInfo = await vui365.stdAxios(UrlCfg.store, data, 'POST');
                    }
                    console.log("[提交表单] msgInfo=", msgInfo, data);
                    if (msgInfo.status == 0) {
                        if (typeof msgInfo.message == "object") {
                            let messageArr = [];
                            for (let k in msgInfo.message) {
                                msgInfo.message[k].forEach((text) => {
                                    messageArr.push(text);
                                });
                            }
                            msgInfo.message = messageArr.join("<br />");
                        }
                        vui365.BsDialog.alert(msgInfo.message);
                        return;
                    }
                    vui365.globalApp.closeFormDialog();
                    vui365.globalApp.refreshDataTable()
                },
                // 获取数剧列的配置内容
                getColumns(isForm = false) {
                    let columns = [
                        { name: "user_name", text: "用户名", component: "text", view: "cru" },
                        { name: "nick_name", text: "昵称", component: "text", view: "cu" },
                        {
                            name: "avatar",
                            text: "头像",
                            component: "imguploader",
                            view: "cru",
                        },
                        { name: "email", text: "电子邮箱", component: "text", view: "cru" },
                        { name: "mobile", text: "手机号码", component: "text", view: "cru" },
                        { name: "gender", text: "性别", component: "radio", view: "cru" },
                    ];
                    let data = [], isEdit = this.id > 0;
                    for (let col of columns) {
                        if (isForm) {
                            if (isEdit && col.view.indexOf("u") > -1) {
                                data.push(col);
                            } else if (col.view.indexOf("c") > -1) {
                                data.push(col);
                            }
                            continue;
                        }
                        if (col.view.indexOf("r") > -1) {
                            data.push(col);
                        }
                    }
                    return data;
                },
            },
            // created 生命周期
            created() {
                this.id = vui365.EsUtils.getQueryString("id", 0, window.location.search);
                this.initData();
            },
            // mounted 生命周期
            mounted() {
                this.initView();
            },
        }
        // 创建应用实例
        const app = Vue.createApp(App);
        //  注册组件
        app.component("UploadInput", vui365.getComponentOfUploadInput())
        app.component("SelectInput", vui365.getComponentOfSelectInput())
        app.component("CheckboxInput", vui365.getComponentOfCheckboxInput())
        app.component("RadioInput", vui365.getComponentOfRadioInput())
        app.component("CdButton", vui365.getComponentOfCdButton())
        // 加载根元素
        app.mount('#app');
    </script>
</body>

</html>